<template>
	<div class="sroll-board">
		<ul v-if="students">
			<li class="utils-flex-Justbetween utils-flex-Alignend">
				<div>学生人数：3000</div>
				<div>午餐人数：1800</div>
				<div>课辅人数：330</div>
			</li>
		</ul>
		<div class="message-title">{{title}}</div>
		<div class="scroll"><dv-scroll-board :config="configs" /></div>
	</div>
</template>

<script>
export default {
	props: {
		configs: {
			// type: Object,
			required: true
		},
		title: {
			type: String,
			// default: "病事假学生信息"
		},
		students: {
			type: Array
		}
	},
	data() {
		return {
			config: {
				// headerHeight: 25, // 表头高度
				// header: ['病事假学生信息'], // 表头信息
				oddRowBGC: '#0D2261',
				evenRowBGC: '#004379',
        align: ['center','center','center'],
				data: [
					['小王', '一年级', '三班'],
					['小黄', '二年级', '一班'],
					['小明', '五年级', '三班'],
					['小王', '一年级', '三班'],
					['小黄', '二年级', '一班'],
					['小明', '五年级', '三班'],
					['小王', '一年级', '三班'],
					['小黄', '二年级', '一班'],
					['小明', '五年级', '三班'],
					['小王', '一年级', '三班'],
					['小黄', '二年级', '一班'],
					['小明', '五年级', '三班']
				]
			}
		};
	},
	created() {},
	methods: {}
};
</script>

<style lang="less" scoped>
@message-title-height: 26px;
.sroll-board {
	height: 100%;
	ul {
		padding: 0;
		height: 18%;
		// height: 100%;
		margin: 0;
		li {
			font-size: 16px;
			box-sizing: border-box;
			height: 100%;
			// padding: 5px 7px 5px 2px;
			border-bottom: 1px solid #2bc7f6;
			color: #2bc7f6;
			width: 100%;
			// word-wrap: ;
			// white-space: nowrap;
			list-style: none;
		}
	}
	.scroll {
		height: calc(100% - @message-title-height);
	}
	.message-title {
		height: @message-title-height;
		line-height: @message-title-height;
		background-color: #00baff;
		color: white;
		padding-left: 5px;
	}
}
</style>
